<template>
  <div>
    <!--导航-->
    <div style="width:1500px;padding:10px 0;margin:0 auto;">
      <ul class="treeul">
        <el-radio-group v-model="radio1" fill="black" class="radio" >
          <li @click="hide"><el-radio-button label="全部" ></el-radio-button></li>
          <li v-for='(data,index) in data1' id="treeli" @click="show">
            <el-radio-button :label="data.title" class="btn" border=false>
              <span style="">{{data.title}}</span>
              <span style="display: none">{{index}}</span>
              <span style="display: none">{{data.id}}</span>
            </el-radio-button>
          </li>
        </el-radio-group>
      </ul>
      <ul  class="treeul" ref="sonul" style="display: none">
        <el-radio-group v-model="radio2" fill="black">
          <li @click="allbyid()"><el-radio-button label="全部"></el-radio-button></li>
          <li v-for='(data,index) in data2' @click="show1">
            <el-radio-button :label="data.title">
              <span style="">{{data.title}}</span>
              <span style="display: none">{{index}}</span>
              <span style="display: none">{{data.id}}</span>
            </el-radio-button>
          </li>
        </el-radio-group>
      </ul>
      <ul class="treeul" style="border: none">
        <el-radio-group v-model="radio3" fill="black">
          <li @click=" getpagebyfree(null)"> <el-radio-button label="全部" ></el-radio-button></li>
          <li @click=" getpagebyfree(0)"> <el-radio-button label="付费" ></el-radio-button></li>
          <li @click=" getpagebyfree(1)"> <el-radio-button label="免费" ></el-radio-button></li>
          <!--<li> <el-radio-button label="SVIP免费" ></el-radio-button></li>-->
        </el-radio-group>
      </ul>
    </div>
    <div style="width: 100%;background: #F5F5F5; ">
      <div class="pager-box" style="padding:10px 0;margin: 0 auto;width: 1500px" ref="all">
      <!--所有课程-->
      <el-row :gutter="10" style="width: 80%;margin-left: 10%">
        <el-col :span="6" v-for="(item1,index) in course" :key="index" style="margin-bottom: 1%;margin-top: 1%">
          <div  class="divs">
          <a href="#" class="a1">
            <!--<el-card :body-style="{ padding: '0px'}">-->
              <!--<img v-bind:src="item.imgurl" width="100%" height="140px"/>-->
              <!--<div>-->
                <!--<div class="content" style="width: 100%">-->
                  <!--<div>{{item.name}}</div>-->
                  <!--<span class="price" style="color: red;font-size: 18px">￥{{item.price}}</span>-->
                  <!--<span class="sprice" style="color: red;font-size:14px ">SVIP:￥{{item.sprice}}</span>-->
                <!--</div>-->
              <!--</div>-->
            <!--</el-card>-->
            <router-link :to="{path:'/outline',query:{type:'0',all:JSON.stringify(item1)}}">
            <el-card :body-style="{ padding: '0px',height:'200px'}">
              <img v-bind:src="item1.cover" width="100%" height="140px"/>
              <div>
                <div class="content" style="width: 100%">
                  <div>{{item1.title}}</div>
                  <span v-if="item1.isFree==1" style="color: red;font-size: 18px">免费</span>
                  <span v-if="item1.isFree==0" style="color: red;font-size: 18px">
                      <span class="price" style="color: red;font-size: 18px">￥{{item1.courseOriginal}}</span>
                      <span class="sprice" style="color: red;font-size:14px ">SVIP:￥{{item1.courseSvip}}</span>
                    </span>
                </div>
              </div>
            </el-card>
            </router-link>
          </a>
          </div>
        </el-col>
      </el-row>
      <!--所有课程end-->
      <!--分页-->
      <el-pagination  id="test" style="width: 60%;padding-left: 40%"
        @current-change="handleCurrentChange"
        background
        layout="pager"
        :current-page="page.current"
        :page-size="page.size"
        :total="page.total">
      </el-pagination>
      <!--分页end-->
    </div>
    </div>
  </div>
</template>

<script>
  import qs from 'qs'
    export default {
        name: "Allcourse",
        methods:{
          handleCurrentChange(val) {
            this.page.current = val;
            this.findAllbyid();
            window.scrollTo(0,0);
          },
          showImg(){
            this.page.total = this.imgs.length;
            let pagesize = this.page.size;
            let star = (this.page.current - 1)*pagesize;
            let end =  star + this.page.size;
            return this.imgs.slice(star,end);
          },
          hide(){
            this.$refs.sonul.style.display = "none";
            this.$refs.all.style.display = "block";
            this.page.current =1;
            this.imgs = this.all;
            this.page.id = null;
            this.page.current =1;
            this.getpagebyfid();
          },
          show(val){
            let index = val.currentTarget.firstElementChild.firstElementChild.nextElementSibling.firstElementChild.nextElementSibling.innerHTML;
            //console.log(index);
            let id = val.currentTarget.firstElementChild.firstElementChild.nextElementSibling.firstElementChild.nextElementSibling.nextElementSibling.innerHTML;
            //console.log(id);
            //this.findAllbyid(null,id,null);
            this.getpagebyfid(id);
            this.data2 = this.data1[index].children;
            this.data2.fid = this.data1[index].id;
            //console.log(this.data2);
            if(this.data2 != null){
              this.$refs.sonul.style.display = "block";
              this.radio2 = '全部';
            }
            // else
            //   this.$refs.sonul.style.display = "none";
            // this.imgs = this.imgList[index].img;
            // if( this.imgs ==""){
            //   this.$refs.all.style.display = "none";
            //   this.page.current =1;
            // }else{
            //   this.$refs.all.style.display = "block";
            //   this.page.current =1;
            // }
          },
          show1(val){
            //let index = val.currentTarget.firstElementChild.firstElementChild.nextElementSibling.firstElementChild.nextElementSibling.innerHTML;
            let id = val.currentTarget.firstElementChild.firstElementChild.nextElementSibling.firstElementChild.nextElementSibling.nextElementSibling.innerHTML;
            this.getpagebyid(id);
          },
          async  getSubject(){
         await   this.$axios2.post("showdata/eduSubject/findAll").then(r=>{
              //alert(JSON.stringify(r.data))
              this.data1=r.data;
              //console.log(this.data1)
            })
          },
          //点击一级菜单给page赋值
          async  getpagebyfid(id){
              this.page.current =1;
              this.page.fid = id;
              this.page.id =null;
           await   this.findAllbyid();
          },
          //点击二级菜单给page赋值
          async getpagebyid(id){
            this.page.current =1;
            this.page.id = id;
          await  this.findAllbyid();
          },
          //二级菜单的全部按钮
          async   allbyid(){
            this.page.current =1;
            this.page.id = null;
          await  this.findAllbyid();
          },
          //点击是否收费给page赋值
          async getpagebyfree(isfree){
              this.page.current =1;
              this.page.isFree = isfree;
            await  this.findAllbyid();
          },
          //根据菜单查询
          async findAllbyid(){
            // this.page.id = id;
            // this.page.fid = fid;
            // this.page.isFree = isfree;
            // console.log("page:");
            //console.log(this.page);
           await this.$axios2.post("showdata/eduCourse/findAllById",qs.stringify(this.page)).then(r=>{
              //console.log(r.data);
             //alert(JSON.stringify(r.data.records[0]))
              this.course=r.data.records;
              this.page.total=r.data.total;
            });
            //console.log(this.page);
          },
          async  showBySubject(){
              if(this.$route.query.fid != null){
                let index = this.$route.query.index;
            await    this.getSubject();
                console.log(this.data1);
                this.data2 = this.data1[index].children;
                this.data2.fid = this.data1[index].id;
                //console.log(this.data2);
            await this.getpagebyfid(this.$route.query.fid);
                if(this.data2 != null){
                  this.$refs.sonul.style.display = "block";
                  this.radio2 = '全部';
                }
                // else
                //   this.$refs.sonul.style.display = "none";
                // this.imgs = this.imgList[index].img;
                // if( this.imgs ==""){
                //   this.$refs.all.style.display = "none";
                //   this.page.current =1;
                // }else{
                //   this.$refs.all.style.display = "block";
                //   this.page.current =1;
                // }
              }
          },
          async  showBySubject2(){
            if(this.$route.query.ctitle != null){
               let index = this.$route.query.index;
               this.page.fid = this.$route.query.parentId;
              // console.log(this.$route.query.fid);
              //console.log(index);
              await    this.getSubject();
              console.log(this.data1);
              this.data2 = this.data1[index].children;
              this.data2.fid = this.data1[index].id;
              //console.log(this.data2);
              await  this.getpagebyid(this.$route.query.id);
             if(this.data2 != null){
                this.$refs.sonul.style.display = "block";
                 // this.radio2 = this.$route.query.ctitle;
              }
              // else
              //   this.$refs.sonul.style.display = "none";
              // this.imgs = this.imgList[index].img;
              // if( this.imgs ==""){
              //   this.$refs.all.style.display = "none";
              //   this.page.current =1;
              // }else{
              //   this.$refs.all.style.display = "block";
              //   this.page.current =1;
              // }
            }
          },
        },
        created(){
        this.getSubject();
        //this.getpagebyfid();
          this.findAllbyid();
          this.showBySubject();
          this.showBySubject2();
        },
        data(){
          return{
            page:{
              current:1,
              size:8,
              total:0,
              id:'',
              fid:'',
              isFree:'',
            },
            course:'',
            // imgs:[
            //   {imgurl: require('../../assets/img/z1.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课（含12门课程）"},
            //   {imgurl: require('../../assets/img/z2.jpg'),price:"2447.00",sprice:"1999.00",name:"Java核心技术-典型案例与面试实战系列二"},
            //   {imgurl: require('../../assets/img/z3.jpg'),price:"599.00",sprice:"549.00",name:"基于电商业务的企业级大中台从设计到实现(第二阶段)"},
            //   {imgurl: require('../../assets/img/z4.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课"},
            //   {imgurl: require('../../assets/img/z5.jpg'),price:"2447.00",sprice:"1999.00",name:"从零学习netty网络IO通讯开发视频教程"},
            //   {imgurl: require('../../assets/img/j1.jpg'),price:"2447.00",sprice:"1999.00",name:"从无到有构建大型电商微服务亿级架构（第二阶段）"},
            //   {imgurl: require('../../assets/img/j2.jpg'),price:"2447.00",sprice:"1999.00",name:"基于Flink流处理的动态实时亿级用户全端数据统计分析系统（支持所有的终端统计）"},
            //   {imgurl: require('../../assets/img/j3.jpg'),price:"599.00",sprice:"549.00",name:"亿级电商微服务优惠劵系统全实现"},
            //   {imgurl: require('../../assets/img/j4.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课"},
            //   {imgurl: require('../../assets/img/j5.jpg'),price:"2447.00",sprice:"1999.00",name:"从零学习netty网络IO通讯开发视频教程"},
            //   {imgurl: require('../../assets/img/j6.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课"},
            //   {imgurl: require('../../assets/img/j7.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课"},
            //   {imgurl: require('../../assets/img/j8.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课"},
            //   {imgurl: require('../../assets/img/j9.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课"},
            //   {imgurl: require('../../assets/img/j10.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课"},
            //   {imgurl: require('../../assets/img/z2.jpg'),price:"2447.00",sprice:"1999.00",name:"Java核心技术-典型案例与面试实战系列二"},
            //   {imgurl: require('../../assets/img/r9.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课"},
            //   {imgurl: require('../../assets/img/r10.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课"},
            //   {imgurl: require('../../assets/img/r14.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课"},
            //   {imgurl: require('../../assets/img/r15.jpg'),price:"2447.00",sprice:"1999.00",name:"Go语言大型企业级电商秒杀系统实战教程"},
            //   {imgurl: require('../../assets/img/r16.jpg'),price:"2447.00",sprice:"1999.00",name:"Java架构师之企业中性能调优教程"},
            //   {imgurl: require('../../assets/img/j11.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课"},
            //   {imgurl: require('../../assets/img/j12.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课"},
            //   {imgurl: require('../../assets/img/j13.jpg'),price:"2447.00",sprice:"1999.00",name:"PySpark 大数据处理及机器学习Spark2.3"},
            //   {imgurl: require('../../assets/img/j14.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课"},
            //   {imgurl: require('../../assets/img/j15.jpg'),price:"2447.00",sprice:"1999.00",name:"SpringBoot实战历程-从菜鸟到小牛"},
            //   {imgurl: require('../../assets/img/j16.jpg'),price:"2447.00",sprice:"1999.00",name:"Docker入门到Kubernetes实战"},
            //   {imgurl: require('../../assets/img/z1.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课（含12门课程）"},
            //   {imgurl: require('../../assets/img/z2.jpg'),price:"2447.00",sprice:"1999.00",name:"Java核心技术-典型案例与面试实战系列二"},
            //   {imgurl: require('../../assets/img/z3.jpg'),price:"599.00",sprice:"549.00",name:"基于电商业务的企业级大中台从设计到实现(第二阶段)"},
            //   {imgurl: require('../../assets/img/z4.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课"},
            //   {imgurl: require('../../assets/img/z5.jpg'),price:"2447.00",sprice:"1999.00",name:"从零学习netty网络IO通讯开发视频教程"},
            //   {imgurl: require('../../assets/img/j1.jpg'),price:"2447.00",sprice:"1999.00",name:"从无到有构建大型电商微服务亿级架构（第二阶段）"},
            //   {imgurl: require('../../assets/img/j2.jpg'),price:"2447.00",sprice:"1999.00",name:"基于Flink流处理的动态实时亿级用户全端数据统计分析系统（支持所有的终端统计）"},
            //   {imgurl: require('../../assets/img/j3.jpg'),price:"599.00",sprice:"549.00",name:"亿级电商微服务优惠劵系统全实现"},
            //   {imgurl: require('../../assets/img/j4.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课"},
            //   {imgurl: require('../../assets/img/j5.jpg'),price:"2447.00",sprice:"1999.00",name:"从零学习netty网络IO通讯开发视频教程"},
            //   {imgurl: require('../../assets/img/j6.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课"},
            //   {imgurl: require('../../assets/img/j7.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课"},
            //   {imgurl: require('../../assets/img/j8.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课"},
            //   {imgurl: require('../../assets/img/j9.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课"},
            //   {imgurl: require('../../assets/img/j10.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课"},
            //   {imgurl: require('../../assets/img/z2.jpg'),price:"2447.00",sprice:"1999.00",name:"Java核心技术-典型案例与面试实战系列二"},
            //   {imgurl: require('../../assets/img/r9.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课"},
            //   {imgurl: require('../../assets/img/r10.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课"},
            //   {imgurl: require('../../assets/img/r14.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课"},
            //   {imgurl: require('../../assets/img/r15.jpg'),price:"2447.00",sprice:"1999.00",name:"Go语言大型企业级电商秒杀系统实战教程"},
            //   {imgurl: require('../../assets/img/r16.jpg'),price:"2447.00",sprice:"1999.00",name:"Java架构师之企业中性能调优教程"},
            //   {imgurl: require('../../assets/img/j11.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课"},
            //   {imgurl: require('../../assets/img/j12.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课"},
            //   {imgurl: require('../../assets/img/j13.jpg'),price:"2447.00",sprice:"1999.00",name:"PySpark 大数据处理及机器学习Spark2.3"},
            //   {imgurl: require('../../assets/img/j14.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课"},
            //   {imgurl: require('../../assets/img/j15.jpg'),price:"2447.00",sprice:"1999.00",name:"SpringBoot实战历程-从菜鸟到小牛"},
            //   {imgurl: require('../../assets/img/j16.jpg'),price:"2447.00",sprice:"1999.00",name:"Docker入门到Kubernetes实战"},
            //
            //
            // ],
            // all:[
            //   {imgurl: require('../../assets/img/z1.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课（含12门课程）"},
            //   {imgurl: require('../../assets/img/z2.jpg'),price:"2447.00",sprice:"1999.00",name:"Java核心技术-典型案例与面试实战系列二"},
            //   {imgurl: require('../../assets/img/z3.jpg'),price:"599.00",sprice:"549.00",name:"基于电商业务的企业级大中台从设计到实现(第二阶段)"},
            //   {imgurl: require('../../assets/img/z4.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课"},
            //   {imgurl: require('../../assets/img/z5.jpg'),price:"2447.00",sprice:"1999.00",name:"从零学习netty网络IO通讯开发视频教程"},
            //   {imgurl: require('../../assets/img/j1.jpg'),price:"2447.00",sprice:"1999.00",name:"从无到有构建大型电商微服务亿级架构（第二阶段）"},
            //   {imgurl: require('../../assets/img/j2.jpg'),price:"2447.00",sprice:"1999.00",name:"基于Flink流处理的动态实时亿级用户全端数据统计分析系统（支持所有的终端统计）"},
            //   {imgurl: require('../../assets/img/j3.jpg'),price:"599.00",sprice:"549.00",name:"亿级电商微服务优惠劵系统全实现"},
            //   {imgurl: require('../../assets/img/j4.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课"},
            //   {imgurl: require('../../assets/img/j5.jpg'),price:"2447.00",sprice:"1999.00",name:"从零学习netty网络IO通讯开发视频教程"},
            //   {imgurl: require('../../assets/img/j6.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课"},
            //   {imgurl: require('../../assets/img/j7.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课"},
            //   {imgurl: require('../../assets/img/j8.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课"},
            //   {imgurl: require('../../assets/img/j9.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课"},
            //   {imgurl: require('../../assets/img/j10.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课"},
            //   {imgurl: require('../../assets/img/z2.jpg'),price:"2447.00",sprice:"1999.00",name:"Java核心技术-典型案例与面试实战系列二"},
            //   {imgurl: require('../../assets/img/r9.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课"},
            //   {imgurl: require('../../assets/img/r10.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课"},
            //   {imgurl: require('../../assets/img/r14.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课"},
            //   {imgurl: require('../../assets/img/r15.jpg'),price:"2447.00",sprice:"1999.00",name:"Go语言大型企业级电商秒杀系统实战教程"},
            //   {imgurl: require('../../assets/img/r16.jpg'),price:"2447.00",sprice:"1999.00",name:"Java架构师之企业中性能调优教程"},
            //   {imgurl: require('../../assets/img/j11.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课"},
            //   {imgurl: require('../../assets/img/j12.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课"},
            //   {imgurl: require('../../assets/img/j13.jpg'),price:"2447.00",sprice:"1999.00",name:"PySpark 大数据处理及机器学习Spark2.3"},
            //   {imgurl: require('../../assets/img/j14.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课"},
            //   {imgurl: require('../../assets/img/j15.jpg'),price:"2447.00",sprice:"1999.00",name:"SpringBoot实战历程-从菜鸟到小牛"},
            //   {imgurl: require('../../assets/img/j16.jpg'),price:"2447.00",sprice:"1999.00",name:"Docker入门到Kubernetes实战"},
            //   {imgurl: require('../../assets/img/z1.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课（含12门课程）"},
            //   {imgurl: require('../../assets/img/z2.jpg'),price:"2447.00",sprice:"1999.00",name:"Java核心技术-典型案例与面试实战系列二"},
            //   {imgurl: require('../../assets/img/z3.jpg'),price:"599.00",sprice:"549.00",name:"基于电商业务的企业级大中台从设计到实现(第二阶段)"},
            //   {imgurl: require('../../assets/img/z4.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课"},
            //   {imgurl: require('../../assets/img/z5.jpg'),price:"2447.00",sprice:"1999.00",name:"从零学习netty网络IO通讯开发视频教程"},
            //   {imgurl: require('../../assets/img/j1.jpg'),price:"2447.00",sprice:"1999.00",name:"从无到有构建大型电商微服务亿级架构（第二阶段）"},
            //   {imgurl: require('../../assets/img/j2.jpg'),price:"2447.00",sprice:"1999.00",name:"基于Flink流处理的动态实时亿级用户全端数据统计分析系统（支持所有的终端统计）"},
            //   {imgurl: require('../../assets/img/j3.jpg'),price:"599.00",sprice:"549.00",name:"亿级电商微服务优惠劵系统全实现"},
            //   {imgurl: require('../../assets/img/j4.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课"},
            //   {imgurl: require('../../assets/img/j5.jpg'),price:"2447.00",sprice:"1999.00",name:"从零学习netty网络IO通讯开发视频教程"},
            //   {imgurl: require('../../assets/img/j6.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课"},
            //   {imgurl: require('../../assets/img/j7.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课"},
            //   {imgurl: require('../../assets/img/j8.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课"},
            //   {imgurl: require('../../assets/img/j9.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课"},
            //   {imgurl: require('../../assets/img/j10.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课"},
            //   {imgurl: require('../../assets/img/z2.jpg'),price:"2447.00",sprice:"1999.00",name:"Java核心技术-典型案例与面试实战系列二"},
            //   {imgurl: require('../../assets/img/r9.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课"},
            //   {imgurl: require('../../assets/img/r10.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课"},
            //   {imgurl: require('../../assets/img/r14.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课"},
            //   {imgurl: require('../../assets/img/r15.jpg'),price:"2447.00",sprice:"1999.00",name:"Go语言大型企业级电商秒杀系统实战教程"},
            //   {imgurl: require('../../assets/img/r16.jpg'),price:"2447.00",sprice:"1999.00",name:"Java架构师之企业中性能调优教程"},
            //   {imgurl: require('../../assets/img/j11.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课"},
            //   {imgurl: require('../../assets/img/j12.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课"},
            //   {imgurl: require('../../assets/img/j13.jpg'),price:"2447.00",sprice:"1999.00",name:"PySpark 大数据处理及机器学习Spark2.3"},
            //   {imgurl: require('../../assets/img/j14.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课"},
            //   {imgurl: require('../../assets/img/j15.jpg'),price:"2447.00",sprice:"1999.00",name:"SpringBoot实战历程-从菜鸟到小牛"},
            //   {imgurl: require('../../assets/img/j16.jpg'),price:"2447.00",sprice:"1999.00",name:"Docker入门到Kubernetes实战"},
            //
            //
            // ],
            // imgList: [
            //   {img:[{imgurl: require('../../assets/img/z5.jpg'),price:"2447.00",sprice:"1999.00",name:"从零学习netty网络IO通讯开发视频教程"},
            //       {imgurl: require('../../assets/img/j1.jpg'),price:"2447.00",sprice:"1999.00",name:"从无到有构建大型电商微服务亿级架构（第二阶段）"},
            //       {imgurl: require('../../assets/img/j2.jpg'),price:"2447.00",sprice:"1999.00",name:"基于Flink流处理的动态实时亿级用户全端数据统计分析系统（支持所有的终端统计）"},
            //       {imgurl: require('../../assets/img/j3.jpg'),price:"599.00",sprice:"549.00",name:"亿级电商微服务优惠劵系统全实现"}]},
            //   {img:[ {imgurl: require('../../assets/img/j8.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课"},
            //       {imgurl: require('../../assets/img/j9.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课"},
            //       {imgurl: require('../../assets/img/j10.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课"},
            //       {imgurl: require('../../assets/img/z2.jpg'),price:"2447.00",sprice:"1999.00",name:"Java核心技术-典型案例与面试实战系列二"}]},
            //   {img:[  {imgurl: require('../../assets/img/j9.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课"},
            //       {imgurl: require('../../assets/img/j10.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课"},
            //       {imgurl: require('../../assets/img/z2.jpg'),price:"2447.00",sprice:"1999.00",name:"Java核心技术-典型案例与面试实战系列二"},
            //       {imgurl: require('../../assets/img/r9.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课"},
            //       {imgurl: require('../../assets/img/r10.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课"},
            //       {imgurl: require('../../assets/img/r14.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课"},
            //       {imgurl: require('../../assets/img/r15.jpg'),price:"2447.00",sprice:"1999.00",name:"Go语言大型企业级电商秒杀系统实战教程"},
            //       {imgurl: require('../../assets/img/r16.jpg'),price:"2447.00",sprice:"1999.00",name:"Java架构师之企业中性能调优教程"},
            //       {imgurl: require('../../assets/img/j11.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课"},
            //       {imgurl: require('../../assets/img/j12.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课"},
            //       {imgurl: require('../../assets/img/j13.jpg'),price:"2447.00",sprice:"1999.00",name:"PySpark 大数据处理及机器学习Spark2.3"},
            //       {imgurl: require('../../assets/img/j14.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课"},
            //       {imgurl: require('../../assets/img/j15.jpg'),price:"2447.00",sprice:"1999.00",name:"SpringBoot实战历程-从菜鸟到小牛"},
            //       {imgurl: require('../../assets/img/j16.jpg'),price:"2447.00",sprice:"1999.00",name:"Docker入门到Kubernetes实战"},
            //       {imgurl: require('../../assets/img/z1.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课（含12门课程）"},
            //       {imgurl: require('../../assets/img/z2.jpg'),price:"2447.00",sprice:"1999.00",name:"Java核心技术-典型案例与面试实战系列二"},
            //       {imgurl: require('../../assets/img/z3.jpg'),price:"599.00",sprice:"549.00",name:"基于电商业务的企业级大中台从设计到实现(第二阶段)"},
            //       {imgurl: require('../../assets/img/z4.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课"},
            //       {imgurl: require('../../assets/img/z5.jpg'),price:"2447.00",sprice:"1999.00",name:"从零学习netty网络IO通讯开发视频教程"},
            //       {imgurl: require('../../assets/img/j1.jpg'),price:"2447.00",sprice:"1999.00",name:"从无到有构建大型电商微服务亿级架构（第二阶段）"},
            //       {imgurl: require('../../assets/img/j2.jpg'),price:"2447.00",sprice:"1999.00",name:"基于Flink流处理的动态实时亿级用户全端数据统计分析系统（支持所有的终端统计）"},
            //       {imgurl: require('../../assets/img/j3.jpg'),price:"599.00",sprice:"549.00",name:"亿级电商微服务优惠劵系统全实现"},
            //       {imgurl: require('../../assets/img/j4.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课"},
            //       {imgurl: require('../../assets/img/j5.jpg'),price:"2447.00",sprice:"1999.00",name:"从零学习netty网络IO通讯开发视频教程"},
            //       {imgurl: require('../../assets/img/j6.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课"},
            //       {imgurl: require('../../assets/img/j7.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课"},
            //       {imgurl: require('../../assets/img/j8.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课"},
            //       {imgurl: require('../../assets/img/j9.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课"},
            //       {imgurl: require('../../assets/img/j10.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课"},
            //       {imgurl: require('../../assets/img/z2.jpg'),price:"2447.00",sprice:"1999.00",name:"Java核心技术-典型案例与面试实战系列二"},
            //       {imgurl: require('../../assets/img/r9.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课"},
            //       {imgurl: require('../../assets/img/r10.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课"},
            //       {imgurl: require('../../assets/img/r14.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课"},
            //       {imgurl: require('../../assets/img/r15.jpg'),price:"2447.00",sprice:"1999.00",name:"Go语言大型企业级电商秒杀系统实战教程"},
            //       {imgurl: require('../../assets/img/r16.jpg'),price:"2447.00",sprice:"1999.00",name:"Java架构师之企业中性能调优教程"},
            //       {imgurl: require('../../assets/img/j11.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课"},
            //       {imgurl: require('../../assets/img/j12.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课"},
            //       {imgurl: require('../../assets/img/j13.jpg'),price:"2447.00",sprice:"1999.00",name:"PySpark 大数据处理及机器学习Spark2.3"}]},
            //   {img:[]},
            //   {img:[]},{img:[]},
            //   {img:[ {imgurl: require('../../assets/img/j14.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课"},
            //       {imgurl: require('../../assets/img/j15.jpg'),price:"2447.00",sprice:"1999.00",name:"SpringBoot实战历程-从菜鸟到小牛"},
            //       {imgurl: require('../../assets/img/j16.jpg'),price:"2447.00",sprice:"1999.00",name:"Docker入门到Kubernetes实战"}]},
            // ],
            radio1: this.$route.query.title == null ? '全部':this.$route.query.title,
            radio2: this.$route.query.ctitle == null ? '全部':this.$route.query.ctitle,
            radio3: '全部',
            data2:'',
            data1:[]
          }

        }
    }

</script>

<style scoped>
  *{
    text-decoration: none;
  }
  .content div{
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .a1:link,.a1:active,.a1:visited,.a1:hover{
    text-decoration:none;
  }
  .pager-box>>>.el-pager li {
    background-color: white;
    color: black;
    border: 1px solid #CCCCCC;
    width: 60px;
    line-height: 35px;
    height: 35px;
    border-radius: 4px;
  }
  .pager-box>>>.el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #EC7E00;
    color: white;
    border: 1px solid #CCCCCC;
  }
  .treeul{
    border-bottom: #D7D7D7 solid 1px;
    padding-bottom: 1%;
    width: 80%;
    margin-left: 10%;
  }
  .treeul li{
    list-style:none;
    float: left;
    list-style-type: none;
    margin-right:4px;
  }
  .sonul li{
    list-style:none;
    color: black;
    float: left;
  }
  .treeul>>>.el-radio-button__inner {
    border: none;
    border-radius: 4px;
    font-size: 15px;
  }
  .divs:hover{
    position: relative;
    top: -2px;
    left: 2px;
    box-shadow:  5px 5px 5px darkgrey ;
  }
  body{ text-align:center}
</style>

